import QtQuick
import QtQuick.Window

Rectangle {
    width: 120; height: 300

    gradient: Gradient { // 渐变色
        GradientStop { position: 0.0; color: "#F6F6F6" }
        GradientStop { position: 1.0; color: "#D7D7D7" }
    }

    ListView {
        anchors.fill: parent
        anchors.margins: 20
        focus: true // 控制颜色上下选择
        model: 100
        delegate: numberDelegate
        spacing: 5
        clip: true
    }

    Component {
        id: numberDelegate

        Rectangle {
            id: wrapper
            required property int index
            width: ListView.view.width; height: 40
            color: ListView.isCurrentItem ? "#157efb" : "#53d769"
            border.color: Qt.lighter(color, 1.1)

            Text {
                anchors.centerIn: parent
                font.pixelSize: 10
                text: wrapper.index
            }
        }
    }
}

